<template>
	<div class="chuku-info">
		<div class="twoStageWindow">
			<div class="twoStageWindowTitle">
				<!--<span> {{status!="chukudengji"?"出库登记":"出库登记"}}</span>-->
				出库登记
				<div class="twoStageWindowClose">

					<el-button v-if="status=='look' || shenpi" size="mini" type="primary" v-on:click="printStockdet">打印</el-button>
					<el-button v-if="status=='shenhe'" size="mini" type="primary" v-on:click="reviewFlowPop()">审核</el-button>
					<el-button v-if="status=='chukudengji'||status=='chukutijiao'" size="mini" type="primary" v-on:click="dengji(1)" :disabled = "!isRepeat">提交</el-button>
					<el-button v-if="status=='chukudengji'||(status=='chukutijiao' && outstockParams.status == 2)" size="mini" type="primary" v-on:click="dengji(0)" :disabled = "!isRepeat">保存</el-button>


					<el-button size="mini" v-on:click="close">关闭</el-button>
				</div>
			</div>
			<div class="containercontent" style="margin-top:40px;height:100%;padding:10px 20px;">
				<el-form :model="outstockParams" :rules="rules" ref="outstockParams" label-width="100px" class="demo-ruleForm chukuForm" inline>
					<el-form-item label="库管员" prop="storekeeper">
						<el-select v-model="outstockParams.storekeeper" clearable placeholder="请选择" size="mini" style="width:100%;" filterable :disabled="shenpi || status=='look'">
							<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account"  :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="领用人" prop="applicant">
						<el-select v-model="outstockParams.applicant" clearable placeholder="请选择" size="mini" style="width:100%;" filterable :disabled="shenpi || status=='look'">
							<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account"  :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出库日期" prop="billdate">
						<el-date-picker size="mini" v-model="outstockParams.billdate" value-format="yyyy-MM-dd" style="width:100%;" type="date" :disabled="shenpi || status=='look'"
						 placeholder="选择入库日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="备注" prop="remark" style="width:100%;">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :disabled="shenpi||status=='look'" placeholder="备注" v-model="outstockParams.remark">
						</el-input>
					</el-form-item>
				</el-form>

				<div class="elTab">
					<el-tabs v-model = "activeName">
						<el-tab-pane label="物资列表" name = "first">
              <!-- && outstockParams.status != 2 -->
							<div style="float:right;margin-bottom:8px"
               v-if="!shenpi && (status!='look')">
								<el-button  type="primary" size="mini" @click="xuanzewuziShow=true">选择物资</el-button>
							</div>
							<el-table :data="outstockParams.outstockdetBeanList" style="width:100%;height:calc(100% - 38px);" class="tableCon" size='mini'>
								<el-table-column label="序号" min-width="60px" fixed>
									<template slot-scope="scope">
										{{scope.$index+1}}
									</template>
								</el-table-column>
								<el-table-column prop="certificateNumber" min-width="120" label="证书序号" fixed>
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.certificateNumber" :disabled="shenpi" :title = "scope.row.certificateNumber"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="number" min-width="120" label="物资编号" fixed>
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.number" placeholder="CAS号或其他" :disabled="shenpi" :title = "scope.row.number"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="name" label="物资名称" min-width="120" fixed>
									<template slot-scope="scope">
										<span v-if="scope.row.name">
											{{scope.row.name}}
										</span>
										<span v-if="scope.row.materialName">
											{{scope.row.materialName}}
										</span>
										<el-input size="mini" v-if="scope.row.new" v-model="scope.row.name"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="materialTypeName" label="物资类型" min-width="110" fixed show-overflow-tooltip>
									<template slot-scope="scope">
										<span v-if="!scope.row.new">
											{{scope.row.materialTypeName}}
										</span>
										<el-cascader :disabled="shenpi" v-if="scope.row.new" expand-trigger="hover" :options="options" v-model="scope.row.materialTypeName" size="mini" style="width:100%;">
										</el-cascader>
									</template>
								</el-table-column>
								<el-table-column prop="batch" min-width="100" label="批号">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.batch" :disabled="shenpi"  :title = "scope.row.batch"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="purity" label="标准值" width="90">
									<template slot-scope="scope">
										<el-autocomplete class="inline-input" size="mini" :title = "scope.row.purity" v-model="scope.row.purity" :fetch-suggestions="(queryString, cb) => querySearch(queryString, cb,scope.row)" @select="(val) => handleSelect(val,scope.row)" :disabled="shenpi||scope.row.standardSample=='1'" ></el-autocomplete>
									</template>
								</el-table-column>
								<el-table-column prop="concentration" label="不确定值" width="90">
									<template slot-scope="scope">
										<el-autocomplete class="inline-input" size="mini" :title = "scope.row.concentration" v-model="scope.row.concentration" :fetch-suggestions="(queryString, cb) => querySearch1(queryString, cb,scope.row)" @select="(val) => handleSelect1(val,scope.row)" :disabled="shenpi||scope.row.standardSample=='1'"></el-autocomplete>
									</template>
								</el-table-column>
								<el-table-column prop="youxiaoqi" label="有效期" width="150">
									<template slot-scope="scope">
										<el-date-picker style="width: 100%;" :disabled="shenpi" size="mini" v-model="scope.row.validitydate" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions1">
										</el-date-picker>
									</template>
								</el-table-column>
								<el-table-column label="存放位置" width="100">
									<template slot-scope="scope">
										<el-autocomplete class="inline-input" size="mini" v-model="scope.row.stockCode"  :title = "scope.row.stockCode" :fetch-suggestions="querySearch2" :disabled="shenpi">
										</el-autocomplete>
									</template>
								</el-table-column>
								<el-table-column prop="qty" width="100" label="数量">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.qty" :min="1" :disabled="shenpi" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="internalNumber" min-width="100" label="内部编号">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.internalNumber" :disabled="shenpi"  :title = "scope.row.internalNumber"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="baozhuangguige" label="物资规格" width="100">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.spce" :disabled="shenpi" ></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="medium" label="介质" width="100">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.medium" :disabled="shenpi" :title = "scope.row.medium"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="fixedValueDate" label="定值日期" width="150">
									<template slot-scope="scope">
										<el-date-picker style="width: 100%;" :disabled="shenpi" size="mini" v-model="scope.row.fixedValueDate" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions1">
										</el-date-picker>
									</template>
								</el-table-column>
								<el-table-column label="生产厂家" min-width="200">
									<template slot-scope="scope">
										<el-select :disabled="shenpi" v-model="scope.row.companyCode" size="mini" filterable clearable>
											<!--被删除或者停用的不可选中-->
											<el-option v-for="item in supplierData" :key="item.id" :label="item.name" :value="item.id" :disabled = "item.status == 0 || item.deleteFlag">
											</el-option>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column prop="storageTemperature" label="保存温度" width="100">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.storageTemperature" :disabled="shenpi" :title = "scope.row.storageTemperature" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="unit" label="单位" width="100">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.unit" :disabled="shenpi" :title = "scope.row.unit"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" width="100">
									<template slot-scope="scope">
										<el-input size="mini" v-model="scope.row.remark" :disabled="shenpi" :title = "scope.row.remark"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" min-width="180" v-if="!shenpi && status!='look'">
									<template slot-scope="scope">
										<el-button :disabled="shenpi" type="text" size="mini" @click="deleteWuZi(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="审核信息" name = "second" v-if="status=='look' || shenpi">
							<div id="myIframe" v-if="reload" v-loading="loading1" style = "text-align:center;">
								 <span style = "color:#909399;line-height:100px;" v-if = "WorkFlowMsg != '' && WorkFlowMsg != undefined" >{{WorkFlowMsg}}</span>
								<iframe :src="url" id="workFlowIframe" ref="workFlowIframe" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>

				<!--<div class="penalrow selectw100" style="height:38px;" v-if="!shenpi && status!='look'">
					<div style="position:absolute;right:10px;">
						<el-button  type="primary" size="mini" @click="xuanzewuziShow=true">选择物资</el-button>
					</div>
				</div>
				<div class="separaterow" style="height:calc(100% - 172px);">

				</div>-->
			</div>
		</div>
		<div v-if="xuanzewuziShow">
			<xuanzewuzi></xuanzewuzi>
		</div>
		<div v-if="qualitySampleAddShow">
			<quality-sample-add :bjorck="bjorck" :selectRow.sync="selectRow" :samplesetObj.sync="samplesetObj"></quality-sample-add>
		</div>
		<review-flow :addVisible.sync="reviewFlowShow" :reviewData="reviewData" :procInstType="procInstType" :reviewTitle="reviewTitle"
		 @reloadMain="readAbility"></review-flow>
		<print-select :addVisible.sync="printPop" :printTemplateList="printTemplateList" :printData="outstockParams"></print-select>

	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import xuanzewuzi from './children/xuanzekucun.vue'
	import qualitySampleAdd from '../../qualityControl/qualityControl/children/qualitySampleAdd.vue'
	const reviewFlow = () => import('../../../common/reviewFlow.vue');
	const printSelect = () => import('./children/printSelect.vue');
	export default {
		data() {
			var checkstorekeeper = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请选择管理员'));
				}
				if (value == this.outstockParams.applicant) {
					return callback(new Error('管理员不能和领用人为同一人！'));
				}
				callback();
			};
			return {
				reviewFlowShow: false, //审核流显示
				reviewData: null, //点击行需要审核的信息
				procInstType: 't_material_outstock', //审核流要查的表
				reviewTitle: '出库审核',
				rules: {
					storekeeper: [
						{required:true,validator: checkstorekeeper, trigger: 'change' },
					],
					applicant: [
						{required:true,trigger: 'change',message:"请选择领用人" },
					],
				},
				qualitySampleAddShow: false,
				enableStatusValue: '',
				searchName: '',
				currentPage: 1,
				materialTypeValue: '',
				options: [],
				xuanzewuziShow: false,
				textarea3: '',
				selectRow: {},
				samplesetObj: [],
				stockComList: [],
				saveType: '',
				isRepeat:true,
				printTemplateList:[], //打印的模板
				printPop:false, //打印弹框
				activeName:"first",
				loading1:true,
				reload:true,
				url:"",
				supplierData:[],
				WorkFlowMsg:"",
        rukuOrChuku:"chuku",
			}
		},
		props: ['status', 'shenpi', 'outstockParams'],
		computed: {
			...mapState(['enableStatus', 'tableHeightC', 'typeofAbilityTableDate', 'materialType','EmployeeByLabs']),
			TableHeight() {
				return ((window.innerHeight - 90) - 250)
			}
		},
		components: {
			xuanzewuzi, qualitySampleAdd, reviewFlow,printSelect
		},
		created() {
			this.saveType = this.status

			if (this.saveType == 'chukudengji') {
				this.outstockParams.storekeeper = '';
				this.outstockParams.applicant = JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')).loginid;
				this.outstockParams.billdate = this.util.date()

			}

		},
		mounted() {
			console.log(this.shenpi)
			this.readStockComList()
			this.init();

		},
		watch: {
			activeName(val) {
				if (val == "second") {
				this.reload = true;
				if (process.env.NODE_ENV == 'development') {
					this.url = "../../static/workflow.html?id=" + this.outstockParams.id + "&procInstType=" + this.procInstType + "&fromModel=look"
				} else {
					this.url = "static/workflow.html?id=" + this.outstockParams.id + "&procInstType=" + this.procInstType + "&fromModel=look"
				}
				var that = this;
				// setTimeout(function () {
				// 	let iframe = document.getElementById("workFlowIframe");
					window.addEventListener('message', that.handleMessage1)
				// }, 3000)
				}
			}
		},
		methods: {
			handleMessage1(event) {
				const data = event.data
				switch (data.cmd) {
					case 'loadingHide':
					this.loading1 = false;
					this.WorkFlowMsg = "";
					break;
				case 'errorMsg':
					this.loading1 = false;
					this.WorkFlowMsg = "没有查询到审核信息"
					break;
				}
			},
			reviewFlowPop() {
				this.reviewFlowShow = true;
				this.reviewData = this.outstockParams;
			},
			init() {
				this.$http({
					apiUrl: 'resource/readSupplierComboList.htm',
					method: 'post',
					params: '',
					isJson: false
				}).then(res=>{
					if(res.code == 0) {
						this.supplierData = res.data
					}
				})
			},
			readAbility() {
				this.reviewFlowShow = false;
				this.$store.dispatch('getWorkflowList', 0).then(res => {
					this.$notify({
						showClose: true,
						message: '操作成功',
						type: 'success',
						title:"成功"
					})
				})
				this.close()
				this.$parent.readOutstockList()
				this.readStockComList();

			},
			readStockComList() {
				this.$http({
					apiUrl: '/system/readStockComList.htm',
					method: 'post',
					params: null,
					isJson: false
				}).then(res => {
					if (res.code === 0) {
						this.stockComList = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	8、(1)交互名称：出库登记
			// (2)url:addOutstock.htm
			dengji(code) {

				this.$refs['outstockParams'].validate((valid) => {
					if (valid) {
						this.isRepeat = false;
						let url;
						this.outstockParams.submitType = code;


						if (this.saveType == 'chukudengji') {
							url = 'resource/addOutstock.htm'
							this.outstockParams.id = "";
						} else if (this.saveType == 'chukutijiao') {
							url = 'resource/updateOutstock.htm'
						}
						if (this.outstockParams.outstockdetBeanList.length == 0) {
							this.$message({
								showClose: true,
								message: '选择出库物资',
								type: 'info'
							})
							this.isRepeat = true;
							return
						}
						this.$http({
							apiUrl: url,
							method: 'post',
							params: this.outstockParams
						}).then(res => {
							this.isRepeat = true;
							if (res.code === 0) {
								if (code == 0) {

									this.$notify({
										showClose: true,
										message: '保存成功！',
										type: 'success',
										title:"成功",
									})
                  // if (this.saveType == 'chukudengji') {
                  		this.outstockParams.id = res.data.id;
                      this.outstockParams.billNo = res.data.billNo;
                  // }

									this.saveType = 'chukutijiao';
									// this.$parent.chukutijiao({ id: res.data })
								} else {
									this.$notify({
										showClose: true,
										message: '提交成功！',
										type: 'success',
										title:"成功",
									})
									this.close()

								}
								this.$parent.readOutstockList()
							}
						})
					} else {
						this.isRepeat = true;
						return false;
					}
				});
			},
			//		11、(1)交互名称：修改出库登记
			// (2)url:updateOutstock.htm
			// (3)参数：
			updateOutstock(code) {
				this.outstockParams.submitType = code;
				//					for(let i of this.outstockParams.outstockdetBeanList){
				//					i.materialCode = i.materialCode
				//				}
				this.$http({
					apiUrl: 'resource/updateOutstock.htm',
					method: 'post',
					params: this.outstockParams
				}).then(res => {
					if (res.code === 0) {
						console.log(res)
						if (code == 0) {
							this.$message({
								showClose: true,
								message: '编辑保存成功！',
								type: 'success'
							})
						} else {
							this.$message({
								showClose: true,
								message: '编辑提交成功！',
								type: 'success'
							})
							this.close()
						}

						this.$parent.readOutstockList()
					}
				})


			},
			//			3、(1)交互名称：获取标样设置列表
			// 			(2)url:readSampleSet.htm
			readSampleSet(hashcode) {
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: 'resource/readSampleSet.htm',
						method: 'post',
						params: { hashcode: hashcode },
						isJson: false
					}).then(res => {
						if (res.code === 0) {
							console.log(res)
							resolve(res)
						}
					}).catch(err => {
						console.log(err)
					})
				})
			},
			sampleSet(row, flag) {
				this.readSampleSet(row.hashcode).then(res => {
					this.selectRow = row
					this.samplesetObj = res.data
					this.qualitySampleAddShow = true;
					this.bjorck = flag
				})

			},
			// 打印
			printStockdet(){
				this.$http({
					method: 'post',
					apiUrl: '/printBusiness/getPrintTemList.htm',
					params: { businessCode: "outstockdet" },
					isJson: false
					}).then(res => {
					if (res.code === 0) {
						this.printTemplateList = res.data;
						this.printPop = true;
					}
				})
			},
			deleteWuZi(index) {
				this.outstockParams.outstockdetBeanList.splice(index, 1);
			},
			close() {
				this.$parent.chujudengjiShow = false;
				this.activeName = "first";
				this.loading1 = true;
				this.reload = false;
				this.WorkFlowMsg = "";
			}
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}

	.chuku-info .el-form-item {
		width: 33%;
		margin-right: 0 !important;
	}

	.chuku-info .el-form-item .el-form-item__content {
		width: calc(100% - 100px)
	}
	.chuku-info .chukuForm{
		height: 140px;
	}
	.chuku-info .elTab {
		height:calc(100% - 140px)
	}

	.chuku-info .elTab .el-tabs {
		height: 100%;
	}
	.chuku-info .el-tabs__content{
		height:calc(100% - 70px);
	}
	.chuku-info .el-tabs__content .el-tab-pane{
		height:100%;
	}
	/*.chuku-info .el-tabs__content .el-tab-pane .el-table{
		height:calc(100% - 30px);
	}*/
</style>
